<template>
  <div>
    <van-nav-bar title="商品列表" left-text="返回" left-arrow  @click-left="onClickLeft"/>
    <van-tabs v-model="active" @click="handlePrice" animated>
        <van-tab title="综合排序">
            <ListItem :tableData="tableData"></ListItem>
        </van-tab>
        <van-tab title="销量领先">
            <ListItem :tableData="tableData"></ListItem>
        </van-tab>
        <van-tab title="价格" >
            <template #title> 
                <div style="display: flex;">
                    <span>价格</span>
                    <div style="display: flex;flex-direction: column;
                    justify-content: space-around;align-items: center;margin-left: 5px;">
                        <van-icon name="arrow-up" :color="flag?'#FA436A':''"/>
                        <van-icon name="arrow-down"  :color="flag?'':'#FA436A'"/>
                    </div>
                </div>
             </template>
             <ListItem :tableData="tableData"></ListItem>
        </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import {getProdList} from "@/api/product"
import ListItem from "./ListItem.vue"
export default {
    components:{ListItem},
  data() {
    return {
        active:0,
        flag:true,
        productProps:{
            cat_id:0,
            sort:0,
            priceOrder:0,
            kw:""
        },
        tableData:[]
    };
  },
  created() {
    this.productProps.cat_id = this.$route.query.cat_id;
    this.handleProduct();
  },
  computed: {},
  methods: {
    handleProduct(){
        if(this.$route.query.kw!=null){
            this.productProps.kw = this.$route.query.kw;
        }
        getProdList(this.productProps).then(res=>{
           this.tableData = res.data.data.data;
        })
    },
    onClickLeft(){
        this.$router.go(-1)
    },
    handlePrice(){
        if(this.active == 2){
            this.flag = !this.flag;
            this.productProps.priceOrder = this.flag ? 1:2;
        }
        this.productProps.sort =  this.active;
        this.handleProduct();
    },
  },
};
</script>
<style scoped>
    .products{
        width: 90%;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: center;
        margin: 0 auto;
    }
    .products li{
        width: 45%;
        height: 240px;
        margin-right: 10px;
    }
    .products li img{
        width: 100%;
        height: 165px;
    }
    .products li p{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 16px;
    }
    .products li div{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 5px;
    }
    .products li div span:first-child{
        font-size: 16px;
        color: #FA436A;
    }
    .products li div span:last-child{
        font-size: 12px;
        color: #909399;
    }
</style>
